import {createApp} from 'vue'
import './style.css'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import "lib-flexible-computer"
import '@fortawesome/fontawesome-free/css/all.css'
import router, {dynamicRoutes} from './router'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import {smartTimeDisplay} from '@/utils/dateUtils'
import pinia from './stores'

// ========== 导入 vue-grid-layout 组件 ==========
// const layout = [
//   { x: 0, y: 0, w: 2, h: 2, i: '0' }, // x:列位置, y:行位置, w:宽度, h:高度, i:唯一标识
//   { x: 2, y: 0, w: 2, h: 4, i: '1' }
// ]
// 注意：vue-grid-layout 2.4.0 不兼容 Vue 3，需要使用自定义组件包装


// 导入动画插件 - 使用@vueuse/motion
import {MotionPlugin} from '@vueuse/motion';
import {library} from '@fortawesome/fontawesome-svg-core'
import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
import {fas} from '@fortawesome/free-solid-svg-icons'
import {fab} from '@fortawesome/free-brands-svg-icons'

// 导入网格布局适配器组件
import {GridLayout, GridItem} from 'grid-layout-plus'

// 预加载
import AboutView from '@/views/AboutView.vue'

// ========== 先导入高亮库 ==========
import hljs from 'highlight.js'
import 'highlight.js/styles/github.css' // 添加 highlight.js 样式
// 明确导入需要的语言
import javascript from 'highlight.js/lib/languages/javascript'
import typescript from 'highlight.js/lib/languages/typescript'
import python from 'highlight.js/lib/languages/python'
import java from 'highlight.js/lib/languages/java'
import css from 'highlight.js/lib/languages/css'
import xml from 'highlight.js/lib/languages/xml' // 用于HTML
import json from 'highlight.js/lib/languages/json'
import bash from 'highlight.js/lib/languages/bash'
import sql from 'highlight.js/lib/languages/sql'

// 手动注册每种语言
hljs.registerLanguage('javascript', javascript)
hljs.registerLanguage('js', javascript) // 别名
hljs.registerLanguage('typescript', typescript)
hljs.registerLanguage('ts', typescript) // 别名
hljs.registerLanguage('python', python)
hljs.registerLanguage('py', python) // 别名
hljs.registerLanguage('java', java)
hljs.registerLanguage('css', css)
hljs.registerLanguage('html', xml)
hljs.registerLanguage('xml', xml)
hljs.registerLanguage('json', json)
hljs.registerLanguage('bash', bash)
hljs.registerLanguage('sh', bash) // 别名
hljs.registerLanguage('sql', sql)

// ========== Vue3 专用 Markdown 编辑器 ==========
import VMdEditor from '@kangc/v-md-editor'
import '@kangc/v-md-editor/lib/style/base-editor.css'
import githubTheme from '@kangc/v-md-editor/lib/theme/github'
import '@kangc/v-md-editor/lib/theme/style/github.css'

// 配置高亮和主题 - 确保传入正确配置的 hljs
VMdEditor.use(githubTheme, {
    Hljs: hljs,
    codeHighlightExtensionMap: {
        javascript: 'js',
        typescript: 'ts',
        python: 'py',
        bash: 'sh'
    }
})

// ========== 同时配置预览组件 ==========
import VMdPreview from '@kangc/v-md-editor/lib/preview'
import '@kangc/v-md-editor/lib/style/preview.css'

VMdPreview.use(githubTheme, {
    Hljs: hljs,
    codeHighlightExtensionMap: {
        javascript: 'js',
        typescript: 'ts',
        python: 'py',
        bash: 'sh'
    }
})

// 添加Font Awesome图标
library.add(fas, fab)

const initializeApp = async () => {


    const app = createApp(App)

    // ========== 同步插件注册 ==========
    app.use(ElementPlus)
    app.use(pinia)
    app.use(VMdEditor) // 使用 Vue3 编辑器
    app.use(VMdPreview) // 同时注册预览组件
    // 注册Motion for Vue插件 - 确保所有动画指令可用
    app.use(MotionPlugin, {
        directives: {
            'pop-visible-once': {
                initial: {
                    opacity: 0,
                    scale: 0.8
                },
                visible: {
                    opacity: 1,
                    scale: 1,
                    transition: {
                        duration: 500
                    }
                }
            },
            'slide-visible-once': {
                initial: {
                    opacity: 0,
                    x: -50
                },
                visible: {
                    opacity: 1,
                    x: 0,
                    transition: {
                        duration: 500
                    }
                }
            },
            'slide-visible-once-bottom': {
                initial: {
                    opacity: 0,
                    y: 50
                },
                visible: {
                    opacity: 1,
                    y: 0,
                    transition: {
                        duration: 500
                    }
                }
            }
        }
    })
    // 注册Font Awesome组件
    app.component('font-awesome-icon', FontAwesomeIcon)

    // ========== 注册 vue-grid-layout 适配器组件 ==========
    // 注册自定义的GridLayout和GridItem组件作为vue-grid-layout的替代方案
    app.component('GridLayout', GridLayout)
    app.component('GridItem', GridItem)
    app.component('AboutView', AboutView)

    // ========== 动态路由加载 ==========
    try {
        await dynamicRoutes()
        app.use(router)
    } catch (error) {
        console.error('路由加载失败:', error)
    }

    // ========== 注册 Element 图标 ==========
    Object.entries(ElementPlusIconsVue).forEach(([key, component]) => {
        app.component(key, component)
    })

    // ========== 全局过滤器 ==========
    app.config.globalProperties.$filters = {
        timeFilter: (isoString) => smartTimeDisplay(isoString)
    }

    // ========== 挂载应用 ==========
    app.mount('#app')
}

initializeApp()
